<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>login</title>
<link rel="stylesheet" href="system/css/bootstrap.css" />
<script src="system/js/jquery-3.1.0.min.js"></script>
<script src="system/js/bootstrap.js"></script>
<script type="text/javascript" src="system/js/jquery.form.js" charset="UTF-8"></script>
<script>
	$(function(){
		
	    var options = {
			beforeSubmit : showRequest, // pre-submit callback
			success : showResponse, // post-submit callback
			url : "LoginServlet", // override for form's 'action' attribute
			type : "post", // 'get' or 'post', override for form's 'method' attribute
			dataType : "json",// 'xml', 'script', or 'json' (expected server response type)
			clearForm : true
		};

		// bind form using 'ajaxForm'
		// pre-submit callback
		function showRequest(formData, jqForm, options) {
			//获取提交的账号
			var account = formData[0].value;
			//获取提交的密码
			var password = formData[1].value;

			//判断账号是否为空
			if (account == "") {
				alert("账号不能为空！");
				return false;
			}
			//判断密码是否为空
			if (password == "") {
				alert("密码不能为空！")
				return false;
			}
			
			return true;
		}

		// post-submit callback
		function showResponse(responseText, statusText, xhr, $form) {
			
			if("success" == responseText.message){
        		location.href = "system/main.jsp";
        	}else if("noAccount" == responseText.message){
        		alert("账号不存在 ");
        	}else if("errorPassword" == responseText.message){
        		alert("密码错误");
        	}
			
			
		}

		$('#myForm').ajaxForm(options);
	})
</script>
</head>
<body style="padding-top: 15%">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-4 column">
                </div>
                <div class="col-md-4 column" style="padding:0px;border:1px solid #bdc4cb;box-shadow:-1px 0 5px #bdc4cb,-1px 0 20px #bdc4cb" >
                    <h3 align="center" style="color:#337BB7"><strong>投票系统登陆</strong></h3>
                    <form class="form-horizontal" role="form" style="padding: 5%;;border-top: 1px solid #bdc4cb" method="post" id = "myForm">
                        <div class="form-group">
                            <label for = "account" class="col-sm-2 control-label">账号</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="account" name = "account"/>
                            </div>
                            <a class="col-sm-3" href = "/voteSystem/register.jsp" style="margin-top:2%;font-size: 16px" >注册账号</a>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-7">
                                <input type="password" class="form-control" id="password" name = "password" />
                            </div>
                            <a class="col-sm-3" href = "#" style="margin-top:2%;font-size: 16px">找回密码</a>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-7">
                                <button type="submit" class="btn btn-default" style="width:100%;background-color: #337BB7"><strong style="color:white">立即登陆</strong></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 column">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>